import React from 'react';
import { Row, Col } from 'antd';
import GGEditor, { Flow,RegisterNode,ItemPanel, Item } from 'gg-editor';
import { FormattedMessage } from 'umi/locale';
import EditorMinimap from '../components/EditorMinimap';
import { FlowContextMenu } from '../components/EditorContextMenu';
import { FlowToolbar } from '../components/EditorToolbar';
import { FlowItemPanel } from '../components/EditorItemPanel';
import { FlowDetailPanel } from '../components/EditorDetailPanel';
import EditCommand from "../command/edit";
import Fullscreen from "../command/fullscreen";
import ExampleBehaviour from '../common/Behaviours/ExampleBehaviour'
import styles from './flow.less';

const Save = React.lazy(() => import('./save'));
const RightDrawer = React.lazy(() => import('../common/Drawer'));

GGEditor.setTrackable(false);

class FlowPage extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      screenClass: "",
      visible: false,
      title: "",
      model: "",
      nodeType:''
    };
  }

  componentDidMount() {
    const { graph } = this.graphNode;
    graph.addBehaviour("nodeSelect");
  }

  setClass=(val)=>{
    this.setState({
      screenClass:val
    })
  };

  openPage=(type)=>{
    if(type ==='charts'){
      this.props.showCharts()
    }else{
      this.setState({
        title:"",
        model:type,
        visible:true,
      })
    }
  };

  onClose = () => {
    this.setState({
      visible: false,
    });
  };

  showTrainProgress=()=>{
    this.props.showTrains()
  };

  seeNodeDetail=(e)=>{
    if(e.item == null){
      return false
    }
    const nodeType = e.item.model.modal;
    this.setState({
      nodeType
    })
  };

  render() {
    const startNodeConfig = {
      draw(item) {
        const group = item.getGraphicGroup();
        const model = item.getModel();
        const width = model.width ;
        const height = model.height;
        const x = -width / 2;
        const y = -height / 2;
        const borderRadius = 25;
        const keyShape = group.addShape('rect', {
          attrs: {
            x,
            y,
            width,
            height,
            radius: borderRadius,
          },
        });
        group.addShape('path', {
          attrs: {
            fill: model.color
          },
        });
        group.addShape('text', {
          attrs: {
            text: model.label ? model.label : this.label,
            x: x + 40,
            y: y + 30,
            textAlign: 'center',
            textBaseline: 'center',
            fill: '#f2f3f4',
          },
        });
        return keyShape;
      },
      anchor: [
        [0.5, 1] // 下边边的中点
      ]
    };
    const squareNodeConfig = {
      draw(item) {
        const group = item.getGraphicGroup();
        const model = item.getModel();
        const width = model.width ;
        const height = model.height;
        const x = -width / 2;
        const y = -height / 2;
        const keyShape = group.addShape('rect', {
          attrs: {
            x,
            y,
            width,
            height,
            radius: 5
          },
        });

        group.addShape('path', {
          attrs: {
            fill: model.color,
          },
        });
        group.addShape('text', {
          attrs: {
            text: model.label ? model.label : this.label,
            x: x + 40,
            y: y + 30,
            textAlign: 'center',
            textBaseline: 'center',
            fill: '#f2f3f4',
          },
        });

        return keyShape;
      },
      anchor: [
        [0.5, 0], // 上面边的中点
        [0.5, 1] // 下边边的中点
      ]
    };
    const rhombusNodeConfig = {
      draw(item) {

        const group = item.getGraphicGroup();
        const model = item.getModel();
        const width = model.width ;
        const height = model.height;
        const x = -width / 2;
        const y = -height / 2;
        const keyShape = group.addShape('path', {
          attrs: {
            //  / 1 \
            // 4     2
            //  \ 3 /
            path: [
              ['M', 0, 0 - height / 2], // 上部顶点
              ['L', width / 2, 0], // 右侧点
              ['L', 0, height / 2], // 下部
              ['L', - width / 2, 0], // 左侧
              ['Z'] // 封闭
            ],
            fill: model.color // 颜色应用到边上，如果应用到填充，则使用 fill: cfg.color
          }
        });

        group.addShape('text', {
          attrs: {
            text: model.label ? model.label : this.label,
            x: x + 50,
            y: y + 28,
            textAlign: 'center',
            textBaseline: 'center',
            fill: '#f2f3f4',
          },
        });

        return keyShape;
      },
      anchor: [
        [0.5, 0], // 上面边的中点
        [0.5, 1] // 下边边的中点
      ]
    };
    const circleNodeConfig = {
      draw(item) {
        const group = item.getGraphicGroup();
        const model = item.getModel();
        const keyShape = group.addShape('circle', {
          attrs: {
            x: 0,
            y: 0,
            r: 36,
          },
        });

        group.addShape('path', {
          attrs: {
            fill: model.color
          },
        });
        group.addShape('text', {
          attrs: {
            text: model.label ? model.label : this.label,
            x: 0,
            y:  4,
            textAlign: 'center',
            textBaseline: 'center',
            fill: '#f2f3f4',
          },
        });
        return keyShape;
      },
      anchor: [
        [0.5, 0], // 上面边的中点
        [0.5, 1] // 下边边的中点
      ]
    };
    const endNodeConfig = {
      draw(item) {
        const group = item.getGraphicGroup();
        const model = item.getModel();
        const width = model.width ;
        const height = model.height;
        const x = -width / 2;
        const y = -height / 2;
        const borderRadius = 25;
        const keyShape = group.addShape('rect', {
          attrs: {
            x,
            y,
            width,
            height,
            radius: borderRadius,
          },
        });

        group.addShape('path', {
          attrs: {
            fill:model.color
          },
        });
        group.addShape('text', {
          attrs: {
            text: model.label ? model.label : this.label,
            x: x + 40,
            y: y + 30,
            textAlign: 'center',
            textBaseline: 'center',
            fill: '#f2f3f4',
          },
        });
        // 状态 logo

        return keyShape;
      },
      anchor: [
        [0.5, 0], // 上面边的中点
      ]
    };
    const { screenClass,title,model,visible,nodeType } = this.state;
    const { dialogId ,data} = this.props;
    return (
      <div className={styles.editorheight}>
        <GGEditor className={screenClass?styles.fullscreen:styles.editor}>
          <RegisterNode name="start-node" config={startNodeConfig} />
          <RegisterNode name="centre-node" config={squareNodeConfig} />
          <RegisterNode name="flow-rhombus" config={rhombusNodeConfig} />
          <RegisterNode name="action-node" config={circleNodeConfig} />
          <RegisterNode name="end-node" config={endNodeConfig} />
          <EditCommand dialogId={dialogId} />
          <Fullscreen fullscreen={this.setClass} />
          <Row type="flex" className={styles.editorHd}>
            <Col span={24}>
              <FlowToolbar dialogId={dialogId} openPage={this.openPage} />
            </Col>
          </Row>
          <Row type="flex" className={styles.editorBd}>
            <Col span={4} className={styles.editorSidebar}>
              <FlowItemPanel />
            </Col>
            <Col span={16} className={styles.editorContent}>
              <Flow
                ref={e => (this.graphNode = e)}
                data={data}
                className={styles.flow}
                style={{ height: "calc(60vh)", width: "60vw" }}
                noEndEdge={false}
                onContextMenu={(e)=>this.seeNodeDetail(e)}
              />
            </Col>
            <Col span={4} className={styles.editorSidebar}>
              <FlowDetailPanel />
              <EditorMinimap />
            </Col>
          </Row>
          <FlowContextMenu type={nodeType} />
          <ExampleBehaviour />
          <Save dialogId={dialogId} showTrain={this.showTrainProgress} />
        </GGEditor>
        <RightDrawer title={title} model={model} visible={visible} dialogId={dialogId} onClosed={this.onClose}  />
      </div>
    );
  }
}

export default FlowPage;
